{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block head %}
  {{ form.media }}
{% endblock %}


{% block body-sidebar-menu %}
  {% include 'components/sidebar/resources.html' %}
{% endblock %}

{% block body-outer %}
  <div id="body" class="tw:h-full tw:overflow-y-auto tw:pl-4 tw:pr-20 tw:py-2">
    {% for letter, researchers in researchers_by_letter.items %}
      {% if researchers %}
        <div id="section-{{ letter|lower }}" class="tw:mb-6">
          <h2 class="tw:text-2xl tw:font-bold tw:mb-2 tw:pb-1"><a class="tw:text-primary" href="#section-{{ letter|lower }}">#</a> {{ letter|upper }}</h2>
          <div class="tw:flex tw:flex-wrap tw:gap-2">
            {% for researcher, id in researchers.items %}
              <a class="tw:badge tw:badge-soft tw:badge-lg tw:badge-neutral" href="{% url 'user:profile' pk=id %}">
                {{ researcher }}
              </a>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endfor %}
        
  </div>

  <div class="tw:absolute tw:right-2 tw:top-1/2 tw:-translate-y-1/2 tw:border tw:rounded-xl
    tw:shadow-md tw:flex tw:flex-col tw:text-center tw:text-sm tw:py-2 tw:font-bold tw:w-8">
    {% for letter in "abcdefghijklmnopqrstuvwxyz" %}
      {% if letter in available_letters %}
        <a href="#section-{{ letter|lower }}">{{ letter|upper }}</a>
        {% else %}
        <span class="tw:text-gray-300">{{ letter|upper }}</span>
      {% endif %}
    {% endfor %}
  </div>
{% endblock %}

